<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="shortcut icon" href="../img/login/title.png">
    <title>河北工业职业技术学院</title>
    <link rel="stylesheet" href="../css/staffInfo/staffInfo.css">
    <link rel="stylesheet" href="../css/home/home.css">
    <link rel="stylesheet" href="../css/total/head.css">
    <link rel="stylesheet" href="../css/total/left.css">
    <link rel="stylesheet" href="../css/total/total.css">
    <link rel="stylesheet" href="../css/staffInfo/modal.css">
    <!--引入css插件-->
    <link rel="stylesheet" href="../css/font-awesome/leftcss/font-awesome.css">
    <link rel="stylesheet" href="../lib/bootstrap/css/bootstrap.min.css">
    <!--引入js插件-->
    <script type="text/javascript" src="../av/av-min-1.2.1.js"></script>
    <script type="text/javascript" src="../lib/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="../lib/template/template.js"></script>
    <script type="text/javascript" src="../lib/bootstrap/js/bootstrap.min.js"></script>
    <!--引入页面js-->
    <script type="text/javascript" src="../av/initLeanCloud.js"></script>
    <script type="text/javascript" src="../av/reuseMethods.js"></script>
    <script type="text/javascript" src="../js/control/staffInfo/addStaffList.js"></script>
    <script type="text/javascript" src="../js/control/staffInfo/showStaffList.js"></script>
    <script type="text/javascript" src="../js/control/staffInfo/changeStaffInfo.js"></script>
    <script src="../sea-modules/seajs/2.2.0/sea.js"></script>
    <script>
        seajs.config({
            alias: {
                'jquery': '../sea-modules/jquery/jquery/1.10.1/jquery',
                'part':'../js/modules/mainPart'
            }
        });
        seajs.use(['jquery', 'part'], function ($, e) {
            $(document).ready(function () {
                e.part();
            });
        });
    </script>
</head>
<body>
<div id="wrap">
    <!--头部-->
    <div id="header-cont"></div>
    <div class="leftArea" style="position: absolute;top: 74px"></div>
    <div id="mainbody">
        <div id="main-cont">
            <div class="staff-list">
                <div class="header-box-line">
                    <div class="two-btn-box">
                        <button class="AddStaff" data-toggle="modal" data-target="#addStaffInfo">添加</button>
                        <button class="CutStaff" data-toggle="modal">删除</button>
                    </div>
                </div>
                <div class="staff-list-box">
                    <table class="table box-table">
                        <thead>
                        <tr class="box-table-tr" id="list-table-tr">
                            <th class="Staff-span"></th>
                            <th class="Name-th">姓名</th>
                            <th class="Sex-th">性别</th>
                            <th class="Phone-th">联系电话</th>
                            <th class="Id-th">身份证号</th>
                            <th class="Part-th">专业</th>
                            <th class="Job-th">职位</th>
                            <th class="Door-th">学生学号</th>
                            <th class="Type-th">状态</th>
                            <th></th>
                        </tr>
                        </thead>
                        <tbody id="staffInfo-list">
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!--模态框-->
<div class="modal fade" id="addStaffInfo" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog">
        <form class="modal-content addStaffInfo-box" style="border-radius: 0;top: 100px;margin-bottom: 100px">
            <div class="staff-title-box">
                <h6 class="modal-staff-font">添加信息</h6>
            </div>
            <a class="close-box">
                <span class="close-cont" data-dismiss="modal" aria-hidden="true">×</span>
            </a>
            <div class="StaffInfo-modal-box">
                <div class="StaffModal-list">
                    <div class="staffMessage"></div>
                </div>
            </div>
            <div class="conf-change-box">
                <button id="ConfirmSubmit" class="conf-change-btn" type="submit">确认添加</button>
            </div>
        </form>
    </div>
</div>
<!--修改模态框-->
<div class="modal fade" id="changeInfoModal" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content changeStaffInfo-box" style="border-radius: 0;top: 100px;margin-bottom: 100px">
            <div class="staff-title-box">
                <h6 class="modal-staff-font">修改信息</h6>
            </div>
            <a class="close-box">
                <span class="close-cont" data-dismiss="modal" aria-hidden="true">×</span>
            </a>
            <div class="StaffInfo-modal-box">
                <div class="StaffModal-list">
                    <div class="Change-staffMessage"></div>
                </div>
            </div>
            <div class="conf-change-box">
                <button id="ConfirmChange" class="conf-change-btn" type="submit">确认修改</button>
            </div>

        </div>
    </div>
</div>
<!--删除模态框-->
<div class="modal fade" id="cutInfoModal" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content cutStaffInfo-box" style="border-radius: 0">
            <div class="cut-staff-title-box">
                <div class="cut-staff-headTitle">
                    <p class="cut-staff-headFont">删除</p>
                </div>
                <div class="cut-staff-bodyBox">
                    <p class="cut-staff-bodyFont">已选择学生，是否确定删除该学生？</p>
                </div>
                <div class="cut-staff-footer">
                    <input class="cancel-cut-btn" value="取消" data-dismiss="modal" readonly>
                    <input class="confirm-cut-btn" value="确定" readonly>
                </div>
            </div>
            <a class="close-box">
                <span class="close-cont" data-dismiss="modal" aria-hidden="true">×</span>
            </a>
        </div>
    </div>
</div>
<!--提示框-->
<div id="position-box" class="alert-prompt-box hide">
    <div class="prompt hide" id="prompt-box-right">
        <img src="../img/alertsuc.png" class="right-img" alt="成功">
        <div class="alert-mark-right">Success</div>
        <div class="alert-content">
            <input class="prompt-show-font" value="" style="border: none;text-align: center">
        </div>
        <input type="button" class="button-ok" value="OK">
    </div>
    <div class="prompt hide" id="prompt-box">
        <div class="error-img">
            <span class="poor">X</span>
        </div>
        <div class="alert-mark">Oops...</div>
        <div class="alert-content">
            <input class="prompt-show-font" value="" style="border: none;text-align: center">
        </div>
        <input type="button" class="button-ok" value="OK">
    </div>
</div>
<script type="text/text/x-jquery-tmpl" id="staffList-info">
        {{each(i,infoInput) content.infoInput}}
        {{if i ==2}}
             <div class=${infoInput.class}>
                <p class="StaffBox-adj" style="margin: 0">
                <span class='base-star'>*</span>${infoInput.name}：</p>
                <select class="StaffBox-input StaffBox-select" id=${infoInput.id}>
                    <option value="男">男</option>
                    <option value="女">女</option>
                    <option value="未知" selected>未知</option>
                </select>
            </div>
        {{else i>0&&i<5}}
            <div class=${infoInput.class}>
                <p class="StaffBox-adj" style="margin: 0">
                <span class='base-star'>*</span>${infoInput.name}：</p>
                <input class="StaffBox-input" id=${infoInput.id} value>
            </div>
        {{else i ==0}}
            <div class=${infoInput.class}>
                <p class="StaffBox-adj" style="margin: 0">${infoInput.name}：</p>
                <input disabled class="StaffBox-input" value='工院主管' style=${infoInput.top}>
            </div>
        {{else}}
            <div class=${infoInput.class} style=${infoInput.top}>
                <p class="StaffBox-adj" style="margin: 0">${infoInput.name}：</p>
                <input class="StaffBox-input" id=${infoInput.id} value>
            </div>
        {{/if}}
        {{/each}}

</script>
<script type="text/text/x-jquery-tmpl" id="changeStaffList-info">
        {{each(i,changeInfoInput) content.changeInfoInput}}
            {{if i ==2}}
             <div class="StaffBox-area">
                <p class="StaffBox-adj" style="margin: 0">
                <span class='base-star'>*</span>${changeInfoInput.name}：</p>
                <select class="StaffBox-input StaffBox-select" id=${changeInfoInput.id}>
                    <option value="男">男</option>
                    <option value="女">女</option>
                    <option value="未知">未知</option>
                </select>
            </div>
            {{else i ==0}}
            <div class=${changeInfoInput.class}>
                <p class="StaffBox-adj" style="margin: 0">${changeInfoInput.name}：</p>
                <input disabled class="StaffBox-input" value='工院主管'>
            </div>
            {{else i>0&&i<5}}
            <div class=${changeInfoInput.class}>
                <p class="StaffBox-adj" style="margin: 0">
                <span class='base-star'>*</span>${changeInfoInput.name}：</p>
                <input class="StaffBox-input" id=${changeInfoInput.id} value>
            </div>
            {{else}}
                <div class=${changeInfoInput.class} style=>
                <p class="StaffBox-adj" style="margin: 0">${changeInfoInput.name}：</p>
                <input class="StaffBox-input" value id=${changeInfoInput.id}>
                </div>
            {{/if}}
        {{/each}}


</script>

<script id="staffList" type="text/text/x-jquery-tmpl">
            {{each(i,infoList) context.infoList}}
                <tr class='Info-row' id='info-row-id'>
                    <td data-key='ObjectId'class='hide'>${infoList.objectId}</td>
                    <td class='JudgeIcon'><input name='StaffCheckboxName' class='StaffCheckbox' type='checkbox'></td>
                    <td data-key='Name'>${infoList.name}</td>
                    <td data-key='Sex'>${infoList.sex}</td>
                    <td data-key='Phone'>${infoList.phone}</td>
                    <td data-key='Id'>${infoList.id}</td>
                    <td data-key='Part'>${infoList.part}</td>
                    <td data-key='Job'>${infoList.job}</td>
                    <td data-key='Door'>${infoList.door}</td>
                    <td data-key='Type'>${infoList.type}</td>
                    <td class="form-list form-list-write"><button onclick=getData(this) id="auth-btn" data-toggle="modal" data-target="#changeInfoModal">修改</button></td>
                </tr>
            {{/each}}
</script>
<script type="text/javascript" src="../lib/jquery/jquery.min.js"></script>
<script type="text/javascript" src="../lib/template/template.js"></script>
<!--<script type="text/javascript" src="../database/leftData.js"></script>-->
<script type="text/javascript" src="../database/staffModalData.js"></script>
</body>
</html>




